<template>
  <div id="order">
    <div class="header">
      <button><van-icon name="arrow-left" @click="$router.back(-1)" /></button>
      <form action="javascript:void 0">
        <input
          type="text"
          v-model="message"
          @keyup.13="search"
          class="search"
          placeholder="搜索我的订单"
        />
      </form>
      <button><van-icon name="ellipsis" /></button>
    </div>
    <div class="cont">
      <a
        href="JavaScript:;"
        @click="all()"
        :class="{ active: shows == 0 }"
        class="default"
        ><span>全部</span></a
      >
      <a
        href="JavaScript:;"
        @click="payment()"
        :class="{ active: shows == 1 }"
        class="default"
        ><span>待付款</span></a
      >
      <a
        href="JavaScript:;"
        @click="delivery()"
        :class="{ active: shows == 2 }"
        class="default"
        ><span>待发货</span></a
      >
      <a
        href="JavaScript:;"
        @click="collect()"
        :class="{ active: shows == 3 }"
        class="default"
        ><span>待收货</span></a
      >
      <a
        href="JavaScript:;"
        @click="evaluate()"
        :class="{ active: shows == 4 }"
        class="default"
        ><span>待评价</span></a
      >
      <div
        class="commodity"
        v-for="data in arr"
        :key="data.index"
        :style="{ display: nul ? 'block' : 'none' }"
      >
        <div class="title">
          <van-icon name="birthday-cake-o" class="icon" />
          <h4>XinYi甜品官方店</h4>
          <van-icon name="arrow" />
          <h5>
            <span v-if="data.arr[0].order_id == 2">卖家已发货</span>
            <span v-else>未付款</span>
          </h5>
        </div>
        <router-link :to="'/DetailsPage/' + data.arr[0].order_number">
          <div
            class="com-cont"
            v-for="msg in data.arr"
            :key="msg.index"
            :data-id="msg.order_number"
          >
            <div class="describe" :data-id="msg.order_number">
              <div class="phot">
                <img src="../assets/stra.png" class="img" />
              </div>
              <div class="specs">
                <ul>
                  <li>
                    <van-icon name="bag" /><span>{{ msg.goods_name }}</span>
                  </li>
                  <li>
                    <van-icon name="wap-nav" /><span>{{ msg.s_size }}</span>
                  </li>
                  <li>
                    <van-icon name="friends" />
                    <span v-if="msg.size_id == 3">适合1-2人分享</span>
                    <span v-else-if="msg.size_id == 2">适合3-4人分享</span>
                    <span v-else-if="msg.size_id == 4">适合5-6人分享</span>
                    <span v-else>适合7-8人分享</span>
                  </li>
                  <li>
                    <van-icon name="gold-coin" /><span
                      >￥{{ msg.size_money }}</span
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </router-link>
        <div class="footer">
          <p>
            共{{ data.arr.length }}件商品 合计:￥{{
              data.arr[0].order_money
            }}(含运费￥00.00)
          </p>
          <ul>
            <li>
              <button v-if="(data.arr[0].order_id = 2)" style="dspaly:none">
                延长收货
              </button>
            </li>
            <li><button>查看物流</button></li>
            <li>
              <button v-if="data.arr[0].order_id == 2" class="over">
                确认收货
              </button>
              <button v-else>
                交易关闭
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div class="without" :style="{ display: nul ? 'none' : 'block' }">
        <div>
          <van-icon name="bill-o" />
        </div>
        <p>您还没有相关的订单</p>
      </div>
    </div>
  </div>
</template>
<script>
import "vant/lib/index.css";
import Vue from "vue";
import { Icon } from "vant";
Vue.use(Icon);
export default {
  name: "Order",
  data() {
    return {
      arr: [],
      record: [],
      msg: [],
      shows: 0,
      message: "",
      nul: true
    };
  },
  mounted() {
    let id = this.$cookies.get("userId");
    // let id = 1;
    this.axios
      .get("/api/AllOrders", {
        params: {
          user_id: id
        }
      })
      .then(req => {
        this.msg = req.data.data;
        let mag = this.noRepeatF(req.data.data, "order_number");
        this.arr = mag;
        this.record = mag;
        if (this.arr.length == 0) {
          this.nul = false;
        } else {
          this.nul = true;
        }
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  methods: {
    noRepeatF: function(arr, pro) {
      var temp = [];
      var newArr = [];
      for (var i = 0; i < arr.length; i++) {
        var index = temp.indexOf(arr[i][pro]);
        if (index == -1) {
          temp.push(arr[i][pro]);
          var temp2 = {};
          temp2.arr = [arr[i]];
          temp2[pro] = arr[i][pro];
          newArr.push(temp2);
        } else {
          newArr[index].arr.push(arr[i]);
        }
      }
      return newArr;
    },
    judge: function(num) {
      let msg = this.record;
      let data = msg.filter(function(v, i) {
        return msg[i].arr[0].order_id == num;
      });
      if (data.length == 0) {
        this.nul = false;
      } else {
        this.nul = true;
      }
      this.arr = data;
    },
    search: function(event) {
      let reg;
      if (this.message != null) {
        reg = this.message;
      } else {
        return;
      }
      let temp = [];
      let show = false;
      let arr = this.msg.filter(function(v, i) {
        let number = v.order_number;
        let word = v.goods_name;
        let index = word.indexOf(reg);
        if (index != -1) {
          return temp.push(v);
        } else {
          let num = number.indexOf(reg);
          if (num != -1) {
            return temp.push(v);
          }
        }
      });
      let mag = this.noRepeatF(temp, "order_number");
      if (mag.length == 0) {
        this.nul = false;
      } else {
        this.nul = true;
      }
      this.arr = mag;
    },
    all: function() {
      this.shows = 0;
      this.arr = this.record;
      if (this.arr.length == 0) {
        this.nul = false;
      } else {
        this.nul = true;
      }
    },
    payment: function() {
      this.shows = 1;
      this.judge(3);
    },
    delivery: function() {
      this.shows = 2;
      this.judge(5);
    },
    collect: function() {
      this.shows = 3;
      this.judge(6);
    },
    evaluate: function() {
      this.shows = 4;
      this.judge(7);
    }
  }
};
</script>
<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
}
@baseFontSize: 20px;
@baseSize: 20;
@color: #414141;
html,
body {
  font-size: @baseFontSize;
  height: 100%;
}
.px2rem(@name,@px) {
  @{name}: @px / 2 / @baseSize * 1rem;
}
a {
  text-decoration: none;
  color: #424649;
}
#order {
  background-color: #fefcfd;
  width: 100%;
  min-height: 64.55rem /* 1291/20 */;
  overflow: hidden;
  padding-bottom: 1rem;
}
.header {
  padding-top: 2.85rem /* 57/20 */;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  overflow: hidden;
  .search {
    height: 3.2rem /* 75/20 */;
    width: 15rem /* 393/20 */;
    border: 1.3px solid @color;
    border-radius: 2.5rem /* 50/20 */;
    font-size: 1.2rem /* 30/20 */;
    color: #9a9a9a;
    padding-left: 2rem /* 40/20 */;
  }
  button {
    outline: none;
    border: none;
    background: none;
    font-size: 2.3rem;
    text-align: center;
    color: #3e3e3e;
  }
}
.cont {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 2.15rem;
  padding-bottom: 6rem;
  .active {
    flex: 1;
    text-align: center;
    font-size: 1rem /* 20/20 */;
    color: @color;
    span {
      display: inline-block;
      padding-bottom: 0.5rem /* 25/20 */;
      border-bottom: 3px solid @color;
    }
  }
  .default {
    flex: 1;
    text-align: center;
    font-size: 1.4rem /* 30/20 */;
  }
}
.commodity {
  margin-top: 1.4rem /* 20/20 */;
  width: 33rem /* 676/20 */;
  padding-left: 1.1rem /* 22/20 */;
  background: rgb(255, 255, 255);
  border-radius: 1rem /* 20/20 */;
  .title {
    margin-top: 1rem /* 32/20 */;
    display: flex;
    align-items: center;
    .icon {
      color: #000;
      font-size: 1.5rem /* 40/20 */;
      margin-right: 1.5rem /* 30/20 */;
      margin-bottom: 0.5rem;
    }
    h4 {
      font-size: 1.4rem /* 36/20 */;
      margin-right: 1.3rem /* 26/20 */;
      color: #2c2c2c;
    }
    i {
      margin-top: 8px;
      margin-right: 4.1rem /* 82/20 */;
      color: #cccccc;
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }
    h5 {
      color: @color;
      font-size: 1.3rem /* 30/20 */;
    }
  }
  .com-cont {
    .describe {
      height: 15rem /* 300/20 */;
      display: flex;
      align-items: center;
      .phot {
        height: 100%;
        width: 18rem;
        img {
          height: 100%;
        }
      }
      .specs {
        margin-left: 1.5rem;
        ul {
          display: flex;
          flex-direction: column;
          li {
            display: flex;
            align-items: center;
            margin-top: 0.4rem;
            font-size: 1.3rem /* 30/20 */;
            color: #838383;
            span {
              display: inline-block;
              margin-left: 0.3rem;
            }
          }
        }
      }
    }
  }
  .footer {
    display: flex;
    align-items: center;
    flex-direction: column;
    p {
      font-size: 1.4rem;
      color: #333333;
    }
    ul {
      display: flex;
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      li {
        margin-right: 2.2rem;
        button {
          background: none;
          outline: none;
          border: 1px solid #dcdcdc;
          font-size: 1.2rem;
          padding: 0.5rem 1.4rem;
          border-radius: 1.8rem;
          color: #666666;
        }
        .over {
          color: @color;
          border: 1px solid @color;
        }
      }
    }
  }
}
.without {
  margin-top: 3rem /* 20/20 */;
  width: 37.5rem /* 750/20 */;
  text-align: center;
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      width: 9.5rem /* 190/20 */;
      height: 9.5rem /* 190/20 */;
      background: #ff5000;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fdfdfc;
      font-size: 4rem;
    }
  }
  p {
    margin-top: 1rem;
    color: #3d4245;
    font-size: 1.8rem /* 40/20 */;
  }
}
</style>
